<script setup lang="ts">
import { ref, onMounted, nextTick } from "vue";
import * as echarts from "echarts";

const chartRef = ref<HTMLElement>();
const chart = ref()
const data = ref([
    {
        value: 0,
        name: "共享单车",
        itemStyle: {
            color: "#00d4ff"
        }
    },
    {
        value: 0,
        name: "外卖",
        itemStyle: {
            color: "#4ecdc4"
        }
    },
    {
        value: 0,
        name: "民用",
        itemStyle: {
            color: "#45b7d1"
        }
    }
])
const initChart = () => {


    const option = {
        tooltip: {
            trigger: "item",
            formatter: function (params) {
                return params.seriesName + '<br/>' + params.name + ': ' + Math.floor(params.percent) + '%';
            }
        },
        legend: {
            orient: "horizontal",
            left: "center",
            bottom: "5%",
            textStyle: {
                color: "#fff",
                fontSize: 12
            },
            itemWidth: 10,
            itemHeight: 10
        },
        series: [
            {
                name: "用户类型",
                type: "pie",
                radius: ["40%", "60%"],
                center: ["50%", "50%"],
                avoidLabelOverlap: false,
                label: {
                    show: true,
                    textShadowColor: 'transparent',
                    textBorderColor: 'transparent',
                    color: '#fff',
                    fontSize: 16
                },
                emphasis: {
                    label: {
                        show: true,
                        textShadowColor: 'transparent',
                        fontSize: "18",
                        fontWeight: "bold",
                        color: "#fff"
                    }
                },
                labelLine: {
                    show: true
                },
                data: data.value
            }
        ]
    };

    chart.value.setOption(option);
    // 默认高亮第一个扇区
    // chart.value.dispatchAction({
    //   type: 'highlight',
    //   seriesIndex: 0,
    //   dataIndex: 0
    // });
    highlightSector(0)
    // 处理鼠标交互
    chart.value.on('mouseover', function (params: any) {
        highlightSector(params.dataIndex);
    });

    // 点击时固定显示选中扇区
    chart.value.on('click', function (params: any) {
        highlightSector(params.dataIndex);
    });
    // 响应式
    window.addEventListener("resize", () => {
        chart.value.resize();
    });
};

const highlightSector = (index: number) => {
    // 清除所有高亮
    chart.value.dispatchAction({
        type: 'downplay',
        seriesIndex: 0
    });

    // 高亮指定扇区
    chart.value.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: index
    });
}

onMounted(async () => {
    await nextTick()
    let timer = setTimeout(() => {
        chart.value = echarts.init(chartRef.value!);
        initChart();
        clearTimeout(timer)
    }, 1000)
    // initChart();
});

const init = (module: any) => {
    let obj = JSON.parse(module)
    if (module) {
        data.value.forEach((item: any) => {
            if(item.name == '民用'){
                item.value = Number(obj.civilian)
            }else if(item.name == '外卖'){
                item.value = Number(obj.takeaway)    
            }else if(item.name == '共享单车'){
                item.value = Number(obj.sharedBike)
            }
        })
    }
}

defineExpose({
    init
})
</script>

<template>
    <div class="left-top-chart">
        <div ref="chartRef" class="chart-container"></div>
    </div>
</template>

<style scoped lang="less">
.left-top-chart {
    width: 100%;
    height: 100%;

    .chart-container {
        width: 100%;
        height: 100%;
    }
}
</style>